<template>
	<view class="content">
		<view class="navBar">
			<view class="left"></view>
			<view class="center">
				<view v-for="(item,index) in top_tab" :key='index' :id="index" class="uni-tab-item" @click="tabTap">
					<text class="uni-tab-item-title"
						:class="toptab==index ? 'uni-tab-item-title-active' : ''">{{item}}</text>
				</view>
			</view>
			<view class="right">
				<uni-icons class="right-icon" type="search" size="24" color="#fff" @click="search"></uni-icons>
				<uni-icons class="right-icon" type="email" size="24" color="#fff" @click="message"></uni-icons>
			</view>
		</view>
		<view style="width: 100%;height: 110rpx;"></view>
		<view class="interest" v-if="toptab == 0">
			<view class="boxbig">
				<view class="trade">
					<view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr">最新</view>
					<view class="texts" :class="curr==1?'active':''" data-index="1" @tap="setCurr">最热</view>
					<view class="texts" :class="curr==2?'active':''" data-index="2" @tap="setCurr">关注</view>
				</view>
			</view>
			<swiper style="height: 100vh" :current="curr" @change="setCurr">
				<swiper-item class="swiper-item1">
					<scroll-view>
						bbb
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item2">
					<scroll-view class="scroll-view1" scroll-y="true" style="height: auto">
						<view class="my_evaluate" v-for="(item, index) in hotlist" :key="index" @click="dynamic">
							<view class="head_box">
								<view class="head_image">
									<image :src="item.user.avatar"></image>
								</view>
								<view class="headcenter">
									<view class="head_name">{{item.user.userName}}</view>
									<view class="head_time">{{renderTimeYMDHMS(item.postTime)}}</view>
								</view>
								<view class="headright">来源：{{item.group.groupName}}</view>
							</view>
							<view class="textbox">
								{{item.postCont}}
							</view>
							<view v-if="item.postImg === null">
							</view>
							<view v-if="item.postImg !== null">
								<view class="dynamicimage" v-if="item.postImg.length === 1">
									<image class="image" :src="pic" v-for="(pic, index) in item.postImg"
										mode="aspectFill" :key="index"></image>
									<!-- <image :src="s" mode="" v-for="(s,x) in row.cmtImg" :key="x" @click="preview(row.cmtImg, x)"></image> -->
								</view>
								<view class="dynamicimage2" v-if="item.postImg.length === 2">
									<image class="image2" :src="pic" v-for="(pic, index) in item.postImg"
										mode="aspectFill" :key="index"></image>
								</view>
								<view class="dynamicimage4" v-if="item.postImg.length === 4">
									<image class="image4" :src="pic" v-for="(pic, index) in item.postImg"
										mode="aspectFill" :key="index"></image>
								</view>
								<view class="dynamicimage3" v-if="item.postImg.length === 3 || item.postImg.length === 5 || item.postImg.length === 6 || 
								item.postImg.length === 7 || item.postImg.length === 8 || item.postImg.length === 9">
									<image class="image3" :src="pic" v-for="(pic, index) in item.postImg"
										mode="aspectFill" :key="index"></image>
								</view>
							</view>
							<view class="tagbox">
								<view class="tag" v-for="(a, index) in item.postTag" :key="index"
									:style="{'background-color':colorlists[Math.floor(Math.random() * colorlists.length)],'float':index%2===0?'left':'right'}">
									#{{a}}
								</view>
							</view>
							<view class="likecmt">
								<view class="likebox">
									<image src="../../../static/component/likeorcmt/likefalseicon.png"></image>
									<text>{{item.postLikeNum}}</text><!-- {{item.postLikeNum}} -->
								</view>
								<view class="cmtbox">
									<image src="../../../static/component/likeorcmt/resoicon.png"></image>
									<text>{{item.postCmtNum}}</text>
								</view>
							</view>
						</view>

					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item3">
					<scroll-view>
						ccc
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="groupwhole" v-if="toptab == 1">
			<view class="history">
				<text class="title">最近浏览：</text>
				<uni-icons class="delete" type="trash" size="20" @click="deletehistory"></uni-icons>
				<view class="t-list">
					<view class="t-item" v-for="(item, index) in groupHistory" :key="index" hover-class="t-item2">
						<image class="image" :src="item.groupImg"></image>
						<text class="text">{{item.groupName}}</text>
					</view>
					<view class="t-item" @click="moregroup">
						<image class="allgroup" src="../../../static/allgroup.png"></image>
						<text class="text">更多小组</text>
					</view>
				</view>

			</view>
			<view class="mygroup">
				<text class="title">我加入的小组：</text>
				<view class="mylist" hover-class="groupclick" @click="gogroup">
					<view class="group" v-for="(item, index) in mygroup" :key="index" hover-class="groupclick"
						@click="gogroup">
						<!--每个小组实例-->
						<image :src="item.group.groupImg" class="image2"></image>
						<view class="groupbox" @click="gogroup">
							<text class="groupName">{{item.group.groupName}}</text>
							<text class="groupHot">[热帖]{{item.postHot.postTitle}}</text>
							<text class="groupNew">[新帖]{{item.postNew.postTitle}}</text>
						</view>
						<view class="groupId">99+</view>
					</view>
				</view>
				<button class="button1" hover-class="button2" plain="true"
					@click="clickHandle(20, $event)">查看全部小组</button>
			</view>
			<view class="mylike">
				<text class="title">猜你喜欢：</text>
				<view class="likelist">
					<view class="group" v-for="(item, index) in grouplist" :key="index">
						<view class="top">
							<image :src="item.groupImg" class="image"></image>
							<view class="namebox">
								<text class="groupName">{{item.groupName}}</text>
								<text class="groupNum">12345{{item.groupName}}爱好者</text>
							</view>
							<button class="button" hover-class="buttonclick"
								@click="buttonclick(buttontab)">进入小组</button>

						</view>
						<view class="bottom">
							<text>{{item.groupCont}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="competition" v-if="toptab == 2">


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top_tab: ["动态", "小组", "比赛"],
				toptab: 0,
				tabIndex: 0,
				groupHistory: [],
				imgUrl: "../../static/allgroup.png",
				mygroup: [],
				grouplist: [],
				buttonvalue: "关注",
				buttontab: 1,
				curr: 1,
				hotlist: [],
				competitionlist: [],
				newlist: [],
				followlist: [],
				current: 1, //分页页号

				colorlists: [
					'hsl(12, 90%, 34%)',
					'hsl(138, 24%, 48%)',
					'rgb(232, 13, 131)',
					'rgb(84, 2, 255)',
					'rgb(243, 2, 168)',
					'rgb(16, 195, 195)',
					'hsl(0, 99%, 34%)',
					'rgb(226, 166, 198)',
					'hsl(278, 17%, 66%)',
					'rgb(234, 199, 12)',
					'blueviolet'
				]

			}
		},
		onLoad() {
			this.getGroupHistory("aiqiu");
			this.getMyGroup("aiqiu");
			this.getGroup("aiqiu");
			this.getHot(1, 1);
		},
		toggleDescription(num) {
			this.showText = !this.showText
		},
		onPullDownRefresh() {
			console.log('触发了刷新')
			setTimeout(() => {
				this.getGroupHistory("aiqiu");
				this.getMyGroup("aiqiu");
				this.getGroup("aiqiu");
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			//修改时间格式：年月日时分秒
			renderTimeYMDHMS(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000)
					.toISOString()
					.replace(/T/g, ' ')
					.replace(/\.[\d]{3}Z/, '')
			},
			tabTap(e) {
				console.log(e.currentTarget.id)
				this.toptab = e.currentTarget.id
			},
			search() {
				console.log('你点击了搜索')
			},
			message() {
				console.log('你点击了消息中心')
			},
			dynamic() {
				console.log('你点击了动态')
			},
			getGroupHistory(userId) {
				uni.request({
					url: 'http://ronin.fun:8888/group/history/list',
					data: {
						userId: userId,
					},
					success: (res) => {
						this.groupHistory = res.data.data;
						console.log(this.groupHistory)
					}
				})
			},
			getMyGroup(userId) {
				uni.request({
					url: 'http://ronin.fun:8888/group/follow/my',
					data: {
						userId: userId,
					},
					success: (res) => {
						this.mygroup = res.data.data;
						console.log(this.mygroup)
					}
				})
			},
			getGroup(userId) {
				uni.request({
					url: 'http://ronin.fun:8888/my/group',
					data: {
						userId: userId,
					},
					success: (res) => {
						this.grouplist = res.data.data;
						console.log(this.grouplist)
					}
				})
			},
			getHot(current, type) {
				uni.request({
					url: 'http://ronin.fun:8888/square/dynamic/hotornew',
					data: {
						current: current,
						type: 1,
					},
					success: (res) => {
						this.hotlist = res.data.data.records;
						// uni.showToast({
						// 	title:'已为您更新五条动态',	
						// 	duration: 2000
						// });
					}
				})
			},
			deletehistory() {
				console.log('你点击了删除')
			},
			moregroup() {
				console.log('跳转到更多小组页面')
			},
			clickHandle(num, e) {
				console.log('点击我了', num, e)
			},
			gogroup() {
				console.log('跳转至对应页面')
			},
			setCurr(e) {
				// console.log(e.detail.current)
				let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;
				// console.log(thisCurr)
				this.curr = thisCurr;
			},
			defaultColor() {
				let dc = ['#ff92c3', '#86c2ff', '#73e38d'];
				dc = [Math.floor(Math.random() * dc.length)];
				return dc;
			}
		},
		components: {}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #F2A3C3;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #B0E3FF;

		// 导航栏
		.navBar {
			width: 100%;
			height: 130rpx;
			display: flex;
			background-color: #B0E3FF;
			position: fixed;
			z-index: 1000;
			flex-direction: row;

			.left {
				background-color: #B0E3FF;
				display: inline-block;
				height: 100%;
				width: 200rpx;
			}

			.center {
				//background-color: #007AFF;
				//background-color: #B0E3FF;
				display: flex;
				height: 100%;
				flex: 1;
				width: 350rpx;
				flex-direction: row;

				.uni-tab-item {
					margin-left: 5rpx;
					margin-top: 25rpx;
					display: inline-block;
					//background-color: #000000;
					flex-wrap: nowrap;
					padding-left: 15rpx;
					padding-right: 10rpx;
				}

				.uni-tab-item-title {
					margin-top: 30rpx;
					//background-color: #B0E3FF;
					color: #FFFFFF;
					font-size: 40rpx;
					height: 80rpx;
					line-height: 100rpx;
					flex-wrap: nowrap;
					white-space: nowrap;

				}

				.uni-tab-item-title-active {
					color: #FFFFFF;
					font-weight: bold;
					font-size: 50rpx;
					// border-bottom: solid #797979;
				}
			}

			.right {
				//background-color: #007AFF;
				display: inline-block;
				height: 100%;
				width: 200rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				//justify-content: space-around;
				//padding-left: 10rpx;

				.right-icon {
					//Sbackground-color: #4CD964;
					margin-top: 35rpx;
					margin-left: 30rpx;
					//margin-left: 40rpx;
				}
			}

		}
	}

	.interest {


		.boxbig {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 25rpx;
			border-top-right-radius: 25rpx;
			height: 110rpx;
			border-bottom: l00upx solid #555555;

			.trade {
				width: 600rpx;
				color: #000000;
				overflow: auto;
				font-size: 35rpx;
			}

			.trade view {
				margin-top: 20rpx;
				text-align: center;
				padding-left: 10upx;
				width: 30%;
				float: left;
			}

			.trade .texts.active {
				margin-top: 23rpx;
				border-bottom: 8upx solid #007AFF;
				font-size: 40rpx;
				font-weight: bold;
				color: #007AFF;
			}

		}

		.clickdynamic {
			background-color: #F1F1F1;
		}

		.swiper-item1 {
			background-color: #FFFFFF;
		}

		.swiper-item2 {
			background-color: #FFFFFF;
			display: flex;

			.scroll-view1 {
				height: 100%;

				.my_evaluate {
					display: flex;
					flex-direction: column;
					padding: 20rpx;
					margin: 20rpx;
					border-radius: 8rpx;
					box-shadow: 0 0 10rpx 2rpx rgba($color: #000000, $alpha: 0.1);
					box-sizing: border-box;
					background: #FFFFFF;

					.head_box {
						display: flex;
						flex-direction: row;
						float: left;
						width: 100%;
						height: 140rpx;
						justify-content: space-between;
						align-items: center;
						position: relative;
						justify-content: flex-start;

						//background-color: #007AFF;
						.head_image {
							//background-color: #2C405A;
							width: 100rpx;
							height: 100rpx;
							//overflow: hidden;
							margin-left: 10rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.headcenter {
							display: flex;
							flex: 1;
							//background-color: #4CD964;
							height: 120rpx;
							flex-direction: column;
							width: 400rpx;
							margin-left: 10rpx;

							.head_name {
								//background-color: #FFFFFF;

								margin-top: 15rpx;
								font-size: 35rpx;
								color: #555555;
								//position: absolute;
								//left: 80rpx;
								font-weight: bold;
							}

							.head_time {
								//background-color: #FFFFFF;

								margin-top: 15rpx;
								font-size: 30rpx;
								color: #999999;
							}
						}

						.headright {

							background-color: #FFFFFF;
							//background-color: #007AFF;
							height: 100rpx;
							font-size: 30rpx;
							margin-top: 10rpx;
							//margin-left: rpx;
							color: #C0C0C0;
						}


					}

					.textbox {
						//background-color: #FFFFFF;
						//background-color: #007111;
						//display: flex;
						width: 630rpx;
						font-size: 30rpx;
						justify-content: center;
						//align-items: center;
						color: #555555;
						margin-left: 20rpx;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						/** 对象作为伸缩盒子模型显示 **/
						-webkit-box-orient: vertical;
						/** 设置或检索伸缩盒对象的子元素的排列方式 **/
						-webkit-line-clamp: 3;
						//align-items: center;
					}

					.dynamicimage {
						display: flex;
						//background-color: #000000;
						flex-direction: row;
						//align-items: center;
						justify-content: center;
						margin-top: 20rpx;

						.image {

							align-items: center;
							height: 400rpx;
							width: 400rpx;
							border-radius: 10rpx;
						}
					}

					.dynamicimage2 {
						display: flex;
						//background-color: #000000;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-top: 20rpx;

						.image2 {
							//background-color: #007AFF;
							align-items: center;
							height: 300rpx;
							width: 300rpx;
							border-radius: 10rpx;
							margin-left: 10rpx;
						}
					}

					.dynamicimage3 {
						display: flex;
						//background-color: #000000;
						flex-wrap: wrap;
						flex-direction: row;
						align-items: center;
						//justify-content: center;
						align-items: flex-start;
						align-content: flex-start;
						margin-top: 20rpx;
						margin-left: 15rpx;

						.image3 {
							//background-color: #007AFF;
							align-items: center;
							height: 200rpx;
							width: 200rpx;
							border-radius: 10rpx;
							margin-left: 10rpx;
							margin-top: 10rpx;
						}
					}


					.dynamicimage4 {
						display: flex;
						//background-color: #000000;
						flex-wrap: wrap;
						flex-direction: row;
						align-items: flex-start;
						align-content: flex-start;
						justify-content: center;
						margin-top: 10rpx;

						.image4 {
							//background-color: #007AFF;
							margin-top: 10rpx;
							align-items: center;
							height: 300rpx;
							width: 300rpx;
							border-radius: 10rpx;
							margin-left: 10rpx;
						}
					}

					.tagbox {
						display: flex;
						flex-direction: row;
						height: 40rpx;
						width: 100%;
						//background-color: #007AFF;
						margin-top: 15rpx;

						.tag {
							margin-left: 20rpx;
							padding-top: 5rpx;
							padding-bottom: 7rpx;
							padding-left: 10rpx;
							padding-right: 10rpx;
							color: #FFFFFF;
							height: 40rpx;
							border-radius: 10rpx;
							align-items: center;
							//width: 100rpx;
						}
					}
					.likecmt{
						margin-top: 30rpx;
						//background-color: #007AFF;
						height: 60rpx;
						width: 100%;
						display: flex;
						//flex: 1;
						//width: 200rpx;
						//margin-left: 200rpx;
						justify-content: flex-end;
						.likebox{
							display: flex;
							flex-direction: row;
							//background-color: #333333;
							height: 100%;
							width: 150rpx;
							image{
								height: 50rpx;
								width: 50rpx;
							}
							text{
								margin-top: 5rpx;
							}
						}
						.cmtbox{
							display: flex;
							flex-direction: row;
							//background-color: #4CD964;
							height: 100%;
							width: 150rpx;
						}	image{
								height: 50rpx;
								width: 50rpx;
							}
							text{
								margin-top: 5rpx;
							}
					}

				}
			}
		}

		.swiper-item3 {
			background-color: #FFFFFF;
		}

		.t-item2 {
			background-color: #F1F1F1;
		}
	}

	.groupwhole {
		height: 100%;
		width: 100%;

		.history {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			border-top-left-radius: 25rpx;
			border-top-right-radius: 25rpx;
			height: 300rpx;
			border-bottom: l00upx solid #555555;

			// 标题
			.title {
				color: #333333;
				font-weight: bold;
				margin-left: 30rpx;
				line-height: 80rpx;
				font-size: 35rpx;
			}

			.delete {
				color: #999999;
				margin-left: 500rpx;

			}


			.t-list {
				display: flex;
				width: 100%;
				height: 200rpx;
				flex-direction: row;
				overflow-x: scroll;
				overflow-y: hidden;
				margin-top: 10rpx;
				margin-bottom: 5rpx;

				.t-item {
					flex-shrink: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 176upx;
					font-size: 26upx;
					color: #666;

					.image {
						background-color: #000000;
						width: 100rpx;
						height: 100rpx;
						border-radius: 100rpx;
					}

					.text {
						color: #555555;
						font-weight: bold;
						margin-top: 5rpx;
						margin-bottom: 0rpx;
					}

					.allgroup {
						height: 100rpx;
						width: 100rpx;
					}
				}
			}

		}

		.t-item2 {
			background-color: #F1F1F1;
		}

		.groupclick {
			background-color: #F1F1F1;
		}

		.groupboxclick {
			background-color: #F1F1F1;
		}

		.mygroup {
			border-top: 1upx solid #F2F2F2;
			background-color: #FFFFFF;

			// 标题
			.title {
				color: #333333;
				font-weight: bold;
				margin-left: 30rpx;
				line-height: 80rpx;
				font-size: 35rpx;
			}

			.button1 {
				border: none;
				width: 400rpx;
				margin-top: 30rpx;
				border-radius: 150rpx;
				color: #FFFFFF;
				font-weight: bold;
				//padding-left: 20rpx;
				background-color: #3fb3e4;
			}

			.button2 {
				border: none;
				width: 400rpx;
				margin-top: 30rpx;
				border-radius: 150rpx;
				color: #8F8F94;
				font-weight: bold;
				//padding-left: 20rpx;
				background-color: #549cbb;
			}

			.mylist {
				background-color: #FFFFFF;
				display: flex;
				width: 100%;
				flex-direction: column;
				margin-top: 5rpx;
				margin-bottom: 0rpx;

				.group {
					flex-shrink: 0;
					display: flex;
					justify-content: center;
					flex-direction: row;
					align-items: center;
					height: 140rpx;
					width: 100%;
					padding-top: 10rpx;
					border-bottom: 1upx solid #F2F2F2;

					.groupclick {
						background-color: #F1F1F1;
					}

					.groupboxclick {
						background-color: #F1F1F1;
					}

					.image2 {

						margin-bottom: 10rpx;
						margin-left: 30rpx;
						height: 120rpx;
						width: 120rpx;
						border-radius: 100rpx;
					}

					.groupbox {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						width: 400rpx;
						margin-bottom: 15rpx;

						.groupName {
							font-size: 30rpx;
							font-weight: bold;
							color: #000000;
						}

						.groupHot {
							font-size: 25rpx;
							color: #DD524D;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							min-width: 0;
						}

						.groupNew {
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 25rpx;
							white-space: nowrap;
							color: #808080;
						}
					}

					.groupId {
						margin-left: 20rpx;
						margin-right: 20rpx;
						font-weight: bold;
						color: #007AFF;
					}
				}

			}

		}

		.mylike {


			background-color: #FFFFFF;

			// 标题
			.title {
				color: #333333;
				font-weight: bold;
				margin-left: 30rpx;
				line-height: 80rpx;
				font-size: 35rpx;
			}

			.likelist {
				//background-color: #333333;
				display: flex;
				width: 100%;
				flex-direction: column;
				margin-top: 5rpx;
				margin-bottom: 0rpx;

				.group {
					background-color: #FFFFFF;
					flex-shrink: 0;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					//height: 140rpx;
					width: 100%;
					padding-top: 10rpx;
					border-bottom: 1upx solid #F2F2F2;

					.top {
						flex-shrink: 0;
						display: flex;
						background-color: #FFFFFF;
						justify-content: center;
						flex-direction: row;
						align-items: center;
						height: 140rpx;
						width: 100%;
						padding-top: 10rpx;

						.image {
							background-color: #DD524D;
							margin-bottom: 10rpx;
							margin-left: 30rpx;
							height: 120rpx;
							width: 120rpx;
							border-radius: 100rpx;
						}

						.namebox {
							flex: 1;
							display: flex;
							flex-direction: column;
							margin-left: 10rpx;
							width: 400rpx;
							margin-bottom: 15rpx;

							.groupName {
								font-size: 30rpx;
								font-weight: bold;
								color: #000000;
							}

							.groupNum {
								font-size: 30rpx;
								color: #555555;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
								min-width: 0;
							}
						}

						.button {
							border: none;
							width: 170rpx;
							margin-top: rpx;
							margin-right: 20rpx;
							border-radius: 150rpx;
							font-size: 20rpx;
							color: #FFFFFF;
							//padding-left: 20rpx;
							background-color: #007AFF;
						}

						.buttonclick {
							border: none;
							width: 170rpx;
							margin-top: rpx;
							margin-right: 20rpx;
							border-radius: 150rpx;
							font-size: 20rpx;
							color: #F2F2F2;
							//padding-left: 20rpx;
							background-color: #3987d5;
						}


					}

					.bottom {
						width: 650rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 25rpx;
						//white-space: nowrap;
						color: #808080;
						padding-bottom: 20rpx;
					}

				}
			}
		}

		.competition {}
	}
</style>
